/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/
@keyframes lefteaseinAnimate {
    0% {
        transform: translateX(-2000px);
        opacity: 0;
    }
    /*在0%时设置文字在想X轴-2000px位移处（左边），透明度为0，也就是看不见文字*/
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
    /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}

@-webkit-keyframes lefteaseinAnimate {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-o-keyframes lefteaseinAnimate {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-ms-keyframes lefteaseinAnimate {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-moz-keyframes lefteaseinAnimate {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

/*定义一个名字为righteaseinAnimate动画，实现从页面的右边淡入页面效果*/
@keyframes righteaseinAnimate {
    0% {
        transform: translateX(2000px);
        opacity: 0;
    }
    /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
    /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}

@-webkit-keyframes righteaseinAnimate {
    0% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-o-keyframes righteaseinAnimate {
    0% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-ms-keyframes righteaseinAnimate {
    0% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-moz-keyframes righteaseinAnimate {
    0% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

.slide1_line1, .slide1_line3, .slide2_line1 {
    animation: lefteaseinAnimate 1s ease 1; /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: lefteaseinAnimate 1s ease 1;
    -ms-animation: lefteaseinAnimate 1s ease 1;
    -o-animation: lefteaseinAnimate 1s ease 1;
    -moz-animation: lefteaseinAnimate 1s ease 1;
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.slide1_line2, .slide2_line2 {
    animation: righteaseinAnimate 1s ease 1; /*调用已定义好的动画righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: righteaseinAnimate 1s ease 1;
    -moz-animation: righteaseinAnimate 1s ease 1;
    -ms-animation: righteaseinAnimate 1s ease 1;
    -o-animation: righteaseinAnimate 1s ease 1;
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}


/*定义一个名字为zoominout动画*/
@keyframes zoominout {
    0% {
        transform: scale(1);
        /*opacity: 0;*/
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        /*opacity: 1;*/
    }    
}

@-webkit-keyframes zoominout {
    0% {
        transform: scale(1);
        /*opacity: 0;*/
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        /*opacity: 1;*/
    }
}

@-o-keyframes zoominout {
    0% {
        transform: scale(1);
        /*opacity: 0;*/
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        /*opacity: 1;*/
    }
}

@-ms-keyframes zoominout {
    0% {
        transform: scale(1);
        /*opacity: 0;*/
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        /*opacity: 1;*/
    }
}

@-moz-keyframes zoominout {
    0% {
        transform: scale(1);
        /*opacity: 0;*/
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        /*opacity: 1;*/
    }
}


/*** effect zoom in ***/

.img-zoom-in img {    
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;    
}

.img-zoom-in:hover img {    
    animation: zoominout 1s ease; 
    -webkit-animation: zoominout 1s ease;
    -moz-animation: zoominout 1s ease;
    -ms-animation: zoominout 1s ease;
    -o-animation: zoominout 1s ease;
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
}


/**定义一个名字为graytocolor动画*/
@keyframes graytocolor {
    0% {
        filter: grayscale(100%);
        opacity: 0.45;
    }

    33% {
        filter: grayscale(66%);
        opacity: 0.65;
    }

    66% {
        filter: grayscale(33%);
        opacity: 0.85;
    }

    100% {
        filter: grayscale(0%);
        opacity: 1;
    }

    /*100% {
        filter: grayscale(0%);
        opacity: 1;
    }*/
}

@-webkit-keyframes graytocolor {
    0% {
        filter: grayscale(100%);
        opacity: 0.45;
    }

    33% {
        filter: grayscale(66%);
        opacity: 0.65;
    }

    66% {
        filter: grayscale(33%);
        opacity: 0.85;
    }

    100% {
        filter: grayscale(0%);
        opacity: 1;
    }
}

@-o-keyframes graytocolor {
    0% {
        filter: grayscale(100%);
        opacity: 0.45;
    }

    33% {
        filter: grayscale(66%);
        opacity: 0.65;
    }

    66% {
        filter: grayscale(33%);
        opacity: 0.85;
    }

    100% {
        filter: grayscale(0%);
        opacity: 1;
    }
}

@-ms-keyframes graytocolor {
    0% {
        filter: grayscale(100%);
        opacity: 0.45;
    }

    33% {
        filter: grayscale(66%);
        opacity: 0.65;
    }

    66% {
        filter: grayscale(33%);
        opacity: 0.85;
    }

    100% {
        filter: grayscale(0%);
        opacity: 1;
    }
}

@-moz-keyframes graytocolor {
    0% {
        filter: grayscale(100%);
        opacity: 0.45;
    }

    33% {
        filter: grayscale(66%);
        opacity: 0.65;
    }

    66% {
        filter: grayscale(33%);
        opacity: 0.85;
    }

    100% {
        filter: grayscale(0%);
        opacity: 1;
    }
}

.img-gray {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.img-gray:hover {
    animation: graytocolor 0.5s ease;
    -webkit-animation: graytocolor 0.5s ease;
    -moz-animation: graytocolor 0.5s ease;
    -ms-animation: graytocolor 0.5s ease;
    -o-animation: graytocolor 0.5s ease;
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
}

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    opacity: 0.45;
}



.navbar-collapse {
	
}

.carousel {
	
}